<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-防抖</title>
    <script src="./js/lodash.js"></script>
</head>
<body>
    <h1>01-防抖</h1>
    <p>防抖是指在事件被触发 n 秒后，函数才执行，如果在这 n 秒内又被触发，则重新计时。在函数触发 n 秒后执行，并不立即执行，而是等待 n 秒后才执行。这样可以避免函数在短时间内被多次调用，从而节省系统资源。</p>
    <p>举个例子，比如你在输入框输入内容，每输入一个字母，都会触发事件，但是你并不想立即执行函数，而是等待你输入完毕后，再执行函数。这样可以避免函数在短时间内被多次调用，从而节省系统资源。</p>
    <p>防抖的实现方式有很多，这里以 setTimeout 实现为例：</p>
    <p>
       请输入搜索内容:<input type="text" id="input">
    </p>

    <h2>HTML 代码</h2>
    <pre>
        <code>
            function debounce(func, wait) {
                let timeout;
                return function() {
                    clearTimeout(timeout);
                    timeout = setTimeout(func, wait);
                }
            }

            const input = document.getElementById('input');
            const output = document.getElementById('output');
            const debouncedFunc = debounce(() => {
                output.innerHTML = input.value;
            }, 1000); // 1000ms 后执行

            input.addEventListener('input', debouncedFunc);
        </code>
    </pre>

    
</body>

<script>
// 防抖: 前面所有执行全被取消，最后一次执行在规定时间之后才会触发
  let input = document. querySelector('input');
  //文本发生变化时立即执行
  input.oninput = function() {
    console.log(input.value);
  }

//lodash 防抖插件
console.log(_.debounce(() => {
    
  }, 1000));

</script>
</html>